<template>
  <div class="container">
    <div class="infinite-container visual-header">
      <mu-tabs :value="activeTab" @change="handleTabChange">
        <!-- <mu-tab value="tab99" title="全部" /> -->
        <mu-tab value="tab0" title="待付款" />
        <mu-tab value="tab1" title="待发货" />
        <mu-tab value="tab2" title="待收货" />
        <mu-tab value="tab3" title="已完成" />
      </mu-tabs>
    </div>

    <div class="tabcon infinite-container visual-content">
      <ul class="item" v-if="list.length > 0">
        <li v-for="(item, index) in list" :key="index" @click="gotoDetail(item)" v-show="item.leftTimeTxt!=='已超时'">
          <div class="item-header">
            <div>
              <div>
                <span>订单时间:</span>
                <span>{{item.orderDate}}</span>
              </div>
              <div>
                <span class="going">{{item.orderStatus| filterDrugStatus}}</span>
              </div>
            </div>
          </div>
          <div class="item-con">
            <div v-for="(v, i) in item.drugDetail" :key="i">
              <div class="item-left">
                <div>{{v.name}} </div>
                <div>{{v.specification}} </div>
              </div>
              <div class="item-right">{{v.price | fixedMoney}}×{{v.quantity}}</div>
            </div>

          </div>
          <div class="item-footer">
            <!-- 待付款 -->
            <div v-if="item.orderStatus === '0'">
              <div>
              </div>
              <div>
                <span></span>
              </div>
              <div>
               <span  class="t5" v-if="item.leftTimeTxt!=='已超时'">
                  <span>剩余时间：</span><span>{{item.leftTimeTxt}} </span>
                </span>
                <span  class="t3" v-else>
                  <span>已超时</span>
                </span>
              </div>
              <div v-show="item.leftTimeTxt !== '已超时'">
                <mu-raised-button label="去支付"  class="no-shadow" primary @click.stop="gotoDetail(item)"></mu-raised-button>
              </div>
            </div>
            <!-- 待发货 -->
            <div v-if="item.orderStatus === '1'">
              <div></div>
              <div>
                <span>共{{item.drugDetail && item.drugDetail.length}}件药品（运费  到付）</span>
              </div>
              <div>
                <span>合计:</span>
                <span>{{item.total | fixedMoney}}</span>
              </div>
            </div>
            <!-- 待收货 -->
            <div v-if="item.orderStatus === '2'">
              <div></div>
              <div>
              </div>
              <div>
                 <mu-raised-button label="查看物流" primary @click.stop="gotoExpress(item)"></mu-raised-button>
              </div>
            </div>
          </div>
        </li>

      </ul>
      <empty v-else />
    </div>
  </div>
</template>

<script>
import searchBarClick from "../../components/SearchBarClick.vue";
import leftBorderTitle from "../../components/leftBorderTitle.vue";
import empty from '@/components/empty'
import TimeCounter from '../../components/TimeCounter.js';
import { commonAjaxJson, RESTFUL_API } from "@/api/api";
export default {
  data() {
    return {
      list: [],
      // person: JSON.parse(sessionStorage.person),
      activeTab: "tab0",
      params: {
        patientCode: '',
        orderStatus: 0
      },
      familys: []
    };
  },
  components: {
    searchBarClick,
    leftBorderTitle,
    empty
  },
  mounted() {
    // this.params.patientCode = this.person.patientcode
    this.getFamilys()
  },
  methods: {
    getFamilys () {
      commonAjaxJson(RESTFUL_API.listFamily, {userId: sessionStorage.userId}, true).then(res => {
          if (res.data.code == 200) {
          this.familys = res.data.data || []
          
          if (this.familys.length != 0) {
            let tempArr = []
            for (let i = 0; i < this.familys.length; i++) {
              for (let j = 0; j < this.familys[i].hisBusCardList.length; j++) {
                tempArr.push(this.familys[i].hisBusCardList[j].patientBusCardId)
              }
            }
            this.params.patientCode = tempArr.join(',')
            this.getBuyDrugs()
          }
        }
      })
    },
    handleTabChange(val) {
      this.activeTab = val;
      this.params.orderStatus = val.replace('tab', '')
      this.getBuyDrugs()
    },
    getBuyDrugs() {
      commonAjaxJson(RESTFUL_API.getBuyDrugs, this.params, true)
        .then(res => {
          if (res.data.code == 200) {
            if (!res.data.data) {
              this.list = []
              return
            }
            res.data.data.forEach(item => {
              item.leftTimeTxt = "-:-";
              let tempTotal = 0
              if (item.drugDetail) {
                item.drugDetail.forEach(v => {
                  tempTotal += (v.price * v.quantity)
                })
              }
              item.total = tempTotal
            });
            if (!this.timeCounter) {
              this.timeCounter = new TimeCounter();
            }
            // this.timeCounter.ready().then(() => {
            //   var arr = [];
            //   res.data.forEach(item => {
            //     if (this.timeCounter.checkIsTimeOut(item.orderLifetime)) {
            //       item.leftTimeTxt = "已超时";
            //     } else {
            //       arr.push(item);
            //     }
            //   });
            //   if (arr.length > 0) {
            //     this.timeCounter.timeChangCallback = splash => {
            //       arr.forEach(item => {
            //         var txt = this.timeCounter.calTime(item.orderLifetime, splash);
            //         item.leftTimeTxt = txt;
            //       });
            //     };
            //     this.timeCounter.start();
            //   }
            // });
            this.list = res.data.data
          }
        });
    },
    gotoPay(item) {
      // todo: go to pay
    },
    gotoExpress(item) {
      this.$router.push({
        path: '/orderHistory/expressInfo',
        query: item
      })
    },
    gotoDetail (item) {
      this.$store.commit('UPDATE_PAGEDATA', item)
      this.$router.push('/orderHistory/topayDetail')
    }
  }
};
</script>

<style scoped lang="less">
@import "../../common/css/flex.css";
@import "../../common/css/component";

.ostatus {
  width: 42px;
  height: 21px;
  position: absolute;
  font-size: 10px;
  color: #fff;
  text-align: center;
  top: 0px;
  right: 15px;
  background: url("../../assets/wzjl/tab_zxwz_zx.png") no-repeat center
    center/100% 100%;
}

.tabcon {
  > ul {
    width: 100%;
  }
}

.item {
  > li {
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
  }
  &-header {
    padding-left: 15px;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #efefef;
    > div {
      width: 100%;
      height: 40px;
      display: table;
      font-size: 14px;
      > div {
        display: table-cell;
        vertical-align: middle;
      }
      > div:first-child {
        > span:first-child {
          color: #666;
        }
        > span:nth-child(2) {
          color: #333;
        }
      }
      > div:nth-child(2) {
        padding-right: 15px;
        width: 1%;
        white-space: nowrap;
        > span.topay {
          color: #ff6600;
        }
        > span.going {
          color: #ff6600;
        }
        > span.finished {
          color: #ff6600;
        }
      }
    }
  }
  &-con {
    border-bottom: 1px solid #e8e8e8;
    background: #fff;
    padding: 15px 0 10px 15px;
    font-size: 14px;
    color: #333;
    > div + div {
      margin-top: 10px;
    }
    > div {
      width: 100%;
      position: relative;
      display: table;
      padding-right: 15px;
      > div {
        display: table-cell;
      }
    }
  }
  &-right {
    text-align: right;
    white-space: nowrap;
  }
  &-left {
    > div:nth-child(2) {
      color: #999;
    }
  }
  &-btn {
    width: 100%;
    padding-right: 15px;
    text-align: right;
    height: 44px;
    display: table;
    > div {
      display: table-cell;
      vertical-align: middle;
    }
    background: #fff;
    @{deep} .mu-raised-button {
      width: 75px;
      height: 29px;
      border: 1px solid #2abc6d;
    }
    @{deep}.mu-raised-button.mu-raised-button-inverse {
      color: #2abc6d;
    }
    @{deep}.mu-raised-button-primary {
      background: #fff;
    }
    @{deep}.mu-raised-button-label {
      padding-right: 0;
      padding-left: 0;
    }
  }
  &-footer {
    width: 100%;
    padding-left: 15px;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #efefef;
    img {
      width: 14px;
      height: 14px;
    }
    > div {
      width: 100%;
      height: 40px;
      display: table;
      font-size: 14px;
      > div {
        display: table-cell;
        vertical-align: middle;
      }
      > div:first-child {
        line-height: 0;
      }
      > div:nth-child(3) {
        padding-right: 15px;
        text-align: right;
        color: #ff6600;
      }
      > div:nth-child(4) {
        width: 75px;
        padding-right: 15px;
        text-align: right;
        white-space: nowrap;
        @{deep} .mu-raised-button {
          width: 75px;
          height: 29px;
          border: 1px solid #2abc6d;
        }
        @{deep}.mu-raised-button.mu-raised-button-inverse {
          color: #2abc6d;
        }
        @{deep}.mu-raised-button-primary {
          background: #fff;
        }
      }
    }
  }
}
  .item-footer{
    padding-top: 5px;
    padding-bottom: 5px;
  }
</style>
